<template>
	<view class="shortcut" :style="{ right: right, bottom: bottom }">
		<!-- 首页 -->
		<form @submit="onTargetPage" report-submit="true" data-index="0">
			<button formType="submit" :class="'nav-item btn-normal ' + (isShow ? 'show_80' : transparent ? '' : 'hide_80')"><text class="iconfont icon-home"></text></button>
		</form>

		<!-- 分类页 -->
		<form @submit="onTargetPage" report-submit="true" data-index="1">
			<button formType="submit" :class="'nav-item btn-normal ' + (isShow ? 'show_60' : transparent ? '' : 'hide_60')"><text class="iconfont icon-cate"></text></button>
		</form>

		<!-- 购物车 -->
		<form @submit="onTargetPage" report-submit="true" data-index="2">
			<button formType="submit" :class="'nav-item btn-normal ' + (isShow ? 'show_40' : transparent ? '' : 'hide_40')"><text class="iconfont icon-cart"></text></button>
		</form>

		<!-- 个人中心 -->
		<form @submit="onTargetPage" report-submit="true" data-index="3">
			<button formType="submit" :class="'nav-item btn-normal ' + (isShow ? 'show_20' : transparent ? '' : 'hide_20')"><text class="iconfont icon-profile"></text></button>
		</form>

		<!-- 显示隐藏开关 -->
		<form @submit="onToggleShow" report-submit="true">
			<button formType="submit" :class="'nav-item nav-item__switch btn-normal ' + (isShow ? 'shortcut_click_show' : '')"><text class="iconfont icon-daohang"></text></button>
		</form>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
export default {
	props: {
		right: {
			type: String,
			default: '24rpx'
		},
		bottom: {
			type: String,
			default: '250rpx'
		}
	},
	data() {
		return {
			// 弹窗显示控制
			isShow: false,
			transparent: true
		};
	},
	methods: {
		onToggleShow() {
			this.isShow = !this.isShow;
			this.transparent = false;
		},
		/**
		 * 导航页面跳转
		 */
		onTargetPage(e) {
			let urls = Route.getTabBarLinks();

			// 记录formid
			this.$saveFormId(e.detail.formId);
			console.log(e);
			Route.navigateTo({
				url: urls[e.currentTarget.dataset.index]
			});
		}
	}
};
</script>

<style>
@import '../../style/common.css';

/* 快捷导航 */

.shortcut {
	position: fixed;
	right: 24rpx;
	bottom: 250rpx;
	width: 76rpx;
	line-height: 1;
	z-index: 5;
	border-radius: 50%;
}

/* 导航菜单元素 */

.nav-item {
	position: absolute;
	bottom: 0;
	padding: 0;
	width: 76rpx;
	height: 76rpx;
	line-height: 76rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	text-align: center;
	transform: rotate(0deg);
	opacity: 0;
}

.nav-item text {
	font-size: 40rpx;
}

/* 导航开关 */

.nav-item__switch {
	opacity: 1;
}

.shortcut_click_show {
	margin-bottom: 0;
	background: #ff5454;
}

/* 显示动画 */

.show_80 {
	bottom: 384rpx;
	animation: show_80 0.3s forwards;
}

.show_60 {
	bottom: 288rpx;
	animation: show_60 0.3s forwards;
}

.show_40 {
	bottom: 192rpx;
	animation: show_40 0.3s forwards;
}

.show_20 {
	bottom: 96rpx;
	animation: show_20 0.3s forwards;
}

@keyframes show_20 {
	from {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}

	to {
		bottom: 96rpx;
		transform: rotate(360deg);
		opacity: 1;
	}
}

@keyframes show_40 {
	from {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}

	to {
		bottom: 192rpx;
		transform: rotate(360deg);
		opacity: 1;
	}
}

@keyframes show_60 {
	from {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}

	to {
		bottom: 288rpx;
		transform: rotate(360deg);
		opacity: 1;
	}
}

@keyframes show_80 {
	from {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}

	to {
		bottom: 384rpx;
		transform: rotate(360deg);
		opacity: 1;
	}
}

/* 隐藏动画 */

.hide_80 {
	bottom: 0;
	animation: hide_80 0.3s;
	opacity: 0;
}

.hide_60 {
	bottom: 0;
	animation: hide_60 0.3s;
	opacity: 0;
}

.hide_40 {
	bottom: 0;
	animation: hide_40 0.3s;
	opacity: 0;
}

.hide_20 {
	bottom: 0;
	animation: hide_20 0.3s;
	opacity: 0;
}

@keyframes hide_20 {
	from {
		bottom: 96rpx;
		transform: rotate(360deg);
		opacity: 1;
	}

	to {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}
}

@keyframes hide_40 {
	from {
		bottom: 192rpx;
		transform: rotate(360deg);
		opacity: 1;
	}

	to {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}
}

@keyframes hide_60 {
	from {
		bottom: 288rpx;
		transform: rotate(360deg);
		opacity: 1;
	}

	to {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}
}

@keyframes hide_80 {
	from {
		bottom: 384rpx;
		transform: rotate(360deg);
		opacity: 1;
	}

	to {
		bottom: 0;
		transform: rotate(0deg);
		opacity: 0;
	}
}
</style>
